<#import "/spring.ftl" as spring />
<#import "layout/defaultLayout.ftl" as layout>

<@layout.defaultLayout styles=[] scripts=[]>
<div class="container">

    <!--login modal-->
    <div id="loginModel" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <#--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
                    <h1 class="text-center"><@spring.message code="login.title"/></h1>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form id="loginForm" class="form col-md-12 center-block">
                            <div id="message"></div>
                        <#--<input type="text" name="_username" style="display:none">-->
                        <#--<input type="text" name="_password" style="display:none">-->

                            <div class="form-group">
                                <input type="text" name="username" id="username" class="form-control input-lg"
                                       placeholder="<@spring.message code="user.username"/>" required autofocus>
                            </div>
                            <div class="form-group">
                                <input type="password" name="password" id="password" class="form-control input-lg"
                                       placeholder="<@spring.message code="user.password"/>">
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" id="remember-me"
                                               name="remember-me"> <@spring.message code="login.remember-me"/>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary btn-lg btn-block"
                                        id="sign-in"><@spring.message code="login.sign-up"/></button>
                            <#--<span class="pull-right"><a href="#">Register</a></span><span><a href="#">Need help?</a></span>-->
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="col-md-12">

                    <#--<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!--/.container-->
<div class="footer"><p class="pull-right">©2014 Company</p></div>

<script>
    $(document).ready(function () {
        $(".navbar").hide();

        $("#sign-in").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
            $.ajax({
                type: "POST",
                url: "/auth/check",
                crossDomain: false,
                data: $("#loginForm").serialize(),
                success: function (data) {
                    window.location.href = "<@spring.url relativeUrl="/"></@spring.url>";
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $("#message").addClass("alert alert-danger").text(jqXHR.responseJSON.message);
                }
            });
            return false;
        });

    });

</script>
</@layout.defaultLayout>